<template>
    <view v-if="data.showGuideMask" class="guide-wrap" :style="{ opacity: data.linear }">
        <view
            class="guide-shadow"
            :style="{
                width: (data.guideArray[index].width ? data.guideArray[index].width : data.width + 10) + 'px',
                height: data.height + 10 + 'px',
                left: data.left - 5 + 'px',
                top: data.top - 5 + 'px'
            }"
            v-if="data.left != 0"
        ></view>
        <template v-if="data.guideArray[index].type == 'left' && data.guideArray[index].direction == 'down'">
            <view
                class="guide-messgae-left"
                :style="{
                    top: data.top + data.height + 10 + (data.guideArray[index].offset || 0) + 'px',
                    left: data.guideArray[index].Mleft + 'px'
                }"
                v-if="data.guideArray[index].src"
            >
                <u-image :src="data.guideArray[index].src" :width="data.guideArray[index].imgW" :height="data.guideArray[index].imgH" class="tips-img"></u-image>
            </view>
            <view
                v-else
                class="message-position"
                :style="{
                    top: data.top + data.height + 10 + (data.guideArray[index].offset || 0) + 'px',
                    left: data.guideArray[index].Mleft + 'px'
                }"
            >
                <image style="width: 32px; height: 57px" src="@/static/guide_left.png"></image>
                <view class="guide-messgae-content" :style="{ 'margin-left': data.guideArray[index].Cleft + 'px' }">
                    {{ data.guideArray[index].guideMessage }}
                </view>
            </view>
        </template>
        <template v-if="data.guideArray[index].type == 'right' && data.guideArray[index].direction == 'down'">
            <view
                class="guide-messgae-left"
                :style="{
                    top: data.top + data.height + 10 + (data.guideArray[index].offset || 0) + 'px',
                    left: data.guideArray[index].Mleft + 'px'
                }"
                v-if="data.guideArray[index].src"
            >
                <u-image :src="data.guideArray[index].src" :width="data.guideArray[index].imgW" :height="data.guideArray[index].imgH" class="tips-img"></u-image>
            </view>
            <view
                v-else
                class="message-position"
                :style="{
                    top: data.top + data.height + 10 + (data.guideArray[index].offset || 0) + 'px',
                    left: data.width + data.guideArray[index].Mleft + 'px'
                }"
            >
                <image style="width: 32px; height: 57px" src="@/static/guide_right.png"></image>
                <view class="guide-messgae-content" :style="{ 'margin-left': data.guideArray[index].Cleft + 'px' }">{{ data.guideArray[index].guideMessage }}</view>
            </view>
        </template>
        <template v-if="data.guideArray[index].type == 'left' && data.guideArray[index].direction == 'up'">
            <view
                class="guide-messgae-left"
                :style="{
                    top: data.top - (data.guideArray[index].imgH / 2 || 0) + (data.guideArray[index].offset || 0) + 'px',
                    left: 0
                }"
                v-if="data.guideArray[index].src"
            >
                <u-image :src="data.guideArray[index].src" style="margin: 0 auto" :width="data.guideArray[index].imgW" :height="data.guideArray[index].imgH" class="tips-img"></u-image>
            </view>
            <view
                v-else
                class="message-position"
                :style="{
                    top: data.top - 90 + (data.guideArray[index].offset || 0) + 'px',
                    left: data.guideArray[index].Mleft + 'px'
                }"
            >
                <view class="guide-messgae-content" :style="{ 'margin-left': data.guideArray[index].Cleft + 'px' }">{{ data.guideArray[index].guideMessage }}</view>
                <image style="width: 32px; height: 57px; transform: rotate(180deg)" src="@/static/guide_left.png"></image>
            </view>
        </template>
        <template v-if="data.guideArray[index].type == 'right' && data.guideArray[index].direction == 'up'">
            <view
                class="guide-messgae-left"
                :style="{
                    top: data.top - (data.guideArray[index].imgH / 2 || 0) + (data.guideArray[index].offset || 0) + 'px',
                    left: 0
                }"
                v-if="data.guideArray[index].src"
            >
                <u-image :src="data.guideArray[index].src" style="margin: 0 auto" :width="data.guideArray[index].imgW" :height="data.guideArray[index].imgH" class="tips-img"></u-image>
            </view>
            <view
                v-else
                class="message-position"
                :style="{
                    top: data.top - 90 + (data.guideArray[index].offset || 0) + 'px',
                    left: data.guideArray[index].Mleft + 'px'
                }"
            >
                <view class="guide-messgae-content" :style="{ 'margin-left': data.guideArray[index].Cleft + 'px' }">{{ data.guideArray[index].guideMessage }}</view>
                <image style="width: 32px; height: 57px; transform: rotate(180deg)" src="@/static/guide_right.png"></image>
            </view>
        </template>
        <image
            src="@/static/guide/4.png"
            class="guide-btn"
            :style="{
                top: buttonTop
            }"
            @click="click"
        ></image>
        <!-- 跳过按钮 -->
        <view v-if="data.skip" :style="data.skipStyle" class="skip-btn" @click="skipGuide">
            <u-image src="@/static/guide/3.png" width="163" height="90"></u-image>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'

interface Props{
    index: number
}
const props = withDefaults(defineProps<Props>(),{
    index: 0
})

const emit = defineEmits(['click', 'skip'])

interface dataProps {
    showGuideMask: boolean
    linear: number
    guideArray: Array<any>
    currentIndex: number
    width: number
    height: number
    top: number
    left: number
    skipStyle: any
    skip: boolean
}

const data = reactive<dataProps>({
    showGuideMask: false,
    linear: 0,
    guideArray: [],
    currentIndex: 0,
    width: 0,
    height: 0,
    left: 0,
    top: 0,
    skipStyle: {},
    skip: false
})

const buttonTop = computed(() => {
    return uni.$u.addUnit(data.guideArray[props.index].Btop)
})
/**
 * 初始化组件操作
 */
function init(arr: Array<any>, width: number = 0, height: number = 0, left: number = 0, top: number = 0): void {
    data.guideArray = arr
    data.width = width
    data.height = height
    data.left = left
    data.top = top

    setTimeout(() => {
        data.showGuideMask = true
    }, 30)
}
/**
 * 显示引导
 */
function show(): void {
    data.showGuideMask = true
}

function click(): void {
    emit('click')
}

function skipGuide() {}
// 暴露方法给 父组件
defineExpose({
    init,
    show
})
</script>

<style lang="scss" scoped>
.guide-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    transition: opacity 0.5s;
}
.guide-shadow {
    border: 1px dashed #ffffff;
    position: absolute;
    border-radius: 6px;
    box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
.guide-messgae-left {
    position: absolute;
    width: 100vw;
}
.message-position {
    position: absolute;
}
.guide-messgae-content {
    pointer-events: none;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
}
.guide-btn {
    position: absolute;
    width: 120px;
    height: 42px;
    left: 50%;
    transform: translateX(-60px);
}
.rotate {
    transform: rotate(180deg);
}
.tips-img {
    height: 0;
    width: 0;
    transition: all 0.3s;
}
.skip-btn {
    position: absolute;
}
</style>
